import { Layout, Row, Col } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import React, { FC } from 'react';
import './index.css';
import useStorage from '@/hooks/useStorage';
// import { useNavigate } from "react-router-dom";
import { history } from 'umi';
// 声明类型
type Iprops = {
  collapsed: boolean;
  changeCollapse: () => void;
};

let { Header } = Layout;

const HeaderBase: FC<Iprops> = (props) => {
  // 使用导航
  // let navigate = useNavigate()
  // 控制收起的属性
  let { collapsed, changeCollapse } = props;

  // 调用自定义hook的存储方法
  let [token, methods] = useStorage('qf-token');
  let [userInfo, method] = useStorage('qf-userInfo');
  // 退出登录的方法
  let outLogin = () => {
    // 调用hook中的移除方法
    methods.rm();
    method.rm();
    // 跳转到登录页面
    history.push('/login');
  };
  return (
    <Header style={{ padding: 0 }}>
      {/* 栅格布局 */}
      <Row justify="space-around">
        <Col span={6}>
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: changeCollapse,
            },
          )}
        </Col>
        <Col className="systemName1" span={6}>
          erm商城后台
        </Col>
        <Col className="dropMenu" span={6}>
          <a href="#" onClick={outLogin}>
            退出登录
          </a>
        </Col>
      </Row>
    </Header>
  );
};

export default HeaderBase;
